<template>
  <div>
    <div class="flex">
      <el-radio-group v-model="type" size="large" @click="pieChange">
        <el-radio-button label="sale_">销量</el-radio-button>
        <el-radio-button label="_money">销售额</el-radio-button>
      </el-radio-group>
      <el-select
        v-model="day"
        class="m-2"
        placeholder="Select"
        size="large"
        @click="pieChange"
      >
        <el-option label="昨天" value="yesterday" />
        <el-option label="今天" value="today" />
        <el-option label="前三天" value="three_days" />
        <el-option label="前一周" value="seven_days" />
        <el-option label="前两周" value="fourteen_days" />
        <el-option label="前一个月" value="thirty_days" />
        <el-option label="前两个月" value="sixty_days" />
      </el-select>
    </div>
    <div class="pie" id="pie" style="height: 400px"></div>
    <div class="map" id="map" style="height: 1000px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { statApi } from "./api";
import china from "@/json/china.json";
type EChartsOption = echarts.EChartsOption;

type dayEmnu =
  | "yesterday"
  | "today"
  | "three_days"
  | "thirty_days"
  | "sixty_days"
  | "seven_days"
  | "fourteen_days";

let pieData: SalePie[] = [];
var option: EChartsOption;
var myChart: echarts.ECharts;
let mapData: SaleMap[] = [];

const type = ref<"sale_" | "_money">("sale_");

const day = ref<dayEmnu>("yesterday");

const pieChange = () => {
  const key =
    type.value === "sale_" ? type.value + day.value : day.value + type.value;

  const data = pieData.map((item) => ({
    name: item.name,
    value: item[key],
  }));
  console.log(key);

  (option.series as echarts.SeriesOption[])[0].data = data;
  myChart.setOption(option);
};

const drawMap = () => {
  var mapDom = document.getElementById("map")!;
  var mapChart = echarts.init(mapDom);
  const data = mapData.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }));
  echarts.registerMap("china", china as any);
  mapChart.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>销量：{c}",
      backgroundColor: "rgba(0,0,0,.6)",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    visualMap: {
      min: 0,
      max: 900000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        label: {
          show: true,
        },
        data,
        zoom: 1.2,
      },
    ],
    nameMap: {
      北京市: "北京",
      天津市: "天津",
      河北省: "河北",
      山西省: "山西",
      内蒙古自治区: "内蒙古",
      辽宁省: "辽宁",
      吉林省: "吉林",
      黑龙江省: "黑龙江",
      上海市: "上海",
      江苏省: "江苏",
      浙江省: "浙江",
      安徽省: "安徽",
      福建省: "福建",
      江西省: "江西",
      山东省: "山东",
      河南省: "河南",
      湖北省: "湖北",
      湖南省: "湖南",
      广东省: "广东",
      广西壮族自治区: "广西",
      海南省: "海南",
      重庆市: "重庆",
      四川省: "四川",
      贵州省: "贵州",
      云南省: "云南",
      西藏自治区: "西藏",
      陕西省: "陕西",
      甘肃省: "甘肃",
      青海省: "青海",
      宁夏回族自治区: "宁夏",
      新疆维吾尔自治区: "新疆",
      台湾省: "台湾",
      香港特别行政区: "香港",
      澳门特别行政区: "澳门",
      // "南海诸岛": '',
    },
  });
};
onMounted(() => {
  var chartDom = document.getElementById("pie")!;
  myChart = echarts.init(chartDom);

  statApi().then((res) => {
    pieData = res.data.salePie;
    mapData = res.data.saleMap;
    console.log(mapData);

    const data: any[] = pieData.map((item) => ({
      name: item.name,
      value: item.sale_yesterday,
    }));
    option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,.6)",
        textStyle: {
          color: "#fff",
        },
        formatter: "{b}:{c}({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "right",
        height: 100,
      },
      series: [
        {
          type: "pie",
          label: {
            color: "inherit",
          },
          radius: ["40%", "70%"],
          data,
        },
      ],
    };
    option && myChart.setOption(option);

    drawMap();
  });
});
</script>

<style scoped></style>
